<script setup lang="ts">
import { ref } from "vue";
import tree from "./com/tree.vue";
import { createflowHook } from "./createflowHook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import workflow from "@/views/workflow/com.vue";
import flowdes from "./flowdes.vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

defineOptions({
  name: "User"
});

const formRef = ref();
const {
  form,
  editorRef,
  toolbarConfig,
  mode,
  valueHtml,
  editorConfig,
  handleCreated,
  fileList,
  handlePreview,
  handleRemove,
  handleExceed,
  beforeRemove
} = createflowHook();
</script>

<template>
  <section>
    <div class="main">
      <section class="from">
        <el-card>
          <p class="titlefont">+ 流程：创建-新建事项</p>
          <br />
          <el-divider /> <br />
          <el-form :model="form" label-width="90px">
            <el-form-item label="标题：">
              <el-input v-model="form.name" />
            </el-form-item>
            <p class="goright">单号：zhiyin645313451</p>
            <div class="wangeditor">
              <Toolbar
                style="
                  border: 1px solid #ccc;
                  border-bottom: 0;
                  margin-top: 10px;
                "
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="
                  min-height: 400px;
                  max-height: 700px;
                  overflow-y: auto;
                  border: 1px solid #ccc;
                "
                v-model="valueHtml"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
              />
            </div>
            <br />
            <el-form-item label="关联文档：">
              <el-input
                v-model="form.link"
                maxlength="1000"
                placeholder="请选择"
                show-word-limit
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="附件：">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
              >
                <el-button type="primary">上传附件</el-button>
                <template #tip>
                  <!-- <div class="el-upload__tip">
                    jpg/png files with a size less than 500KB.
                  </div> -->
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-card>
      </section>
      <section class="rightpa"><flowdes /></section>
    </div>
  </section>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
.main {
  width: 100%;
  display: flex;
}
.main-content {
  margin-top: 15px;
}
.el-card {
  margin-top: 0;
  margin-bottom: 0;
}
.from {
  width: calc(100% - 515px);
}
.rightpa {
  width: 500px;
  margin-left: 15px;
}
.tablepa {
}
.detailform {
  margin-top: 25px;
  max-width: 500px;
}
.rows {
  display: flex;
}
.space {
  justify-content: space-between;
  font-size: 20px;
}
.tablerows {
  background: #faf9f9;
  border-bottom: 1px solid #eee;
  width: 400px;
  height: 48px;
  line-height: 48px;
  display: flex;
  .c1 {
    width: 300px;
    padding-left: 16px;
  }
  .c2 {
    width: 70px;
  }
  .c3 {
    width: 30px;
    font-size: 20px;
  }
  .blue {
    color: #1677ff;
  }
}
.tablehead {
  background: #eff2fa;
}
.workflowbox {
  position: relative;
  width: 100%;
  min-height: 800px;
}
::v-deep .el-dialog__body {
  position: relative;
}
.listunit {
  padding: 0 0 15px 0;
  font-size: 14px;
}
.title {
  font-size: 16px;
  margin-top: 12px;
}
::v-deep .el-divider--horizontal {
  margin: 10px 0;
}
::v-deep .el-input-group__append {
  cursor: pointer;
}
.wlimit {
  width: 500px;
}
.nodata {
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
  .el-icon {
    font-size: 40px;
  }
}
.btnicon {
  width: 16px;
  height: 16px;
  img {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}
.m-l-10 {
  margin-left: 10px;
}
.submitzone {
  text-align: center;
  margin: 15px;
}
.titlefont {
  font-size: 18px;
}
.goright {
  text-align: right;
}
</style>
